<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="biaodanBox">
					<view class="contener700" style="padding-top: 10rpx;">
						<view class="orderListbox">

							<view class="orderListxinxi" style="height: 160rpx;" v-for="val in item.snapshot"
								:key='val.id'>
								<view>
									<image class="orderListboximg" :src="val.avatar" mode="">
									</image>
								</view>
								<view style="margin-left: 15rpx;">
									<view style="margin-top: 5rpx;">
										<view class="between2 topGoods">
											<view  style="width: 75%;">
												<view class="line-clamp2 title">{{val.title}}</view>
												<view class="textOver spec">{{val.overview}}</view>
											</view>
											<view style="margin-right: 10rpx;" class="num">
												<text>x{{val.count}}</text>
												<rich-text style="font-size: 32rpx;" :nodes="getStatus(item.status)">
												</rich-text>
											</view>
										</view>
										<!-- <view class="snapshot">

											<text>{{val.overview}}</text>
										</view> -->
									</view>
								</view>
							</view>
							<view style="border-top: 2rpx solid #C4C4C4;"></view>
							<view class="orderListprice">
								<view>
									合计:<text>￥{{item.totalPrice}}</text>
								</view>

								<button size="mini" v-if="item.status == 1 || item.status == 2 || item.status == 3 || item.status == 4" class="refund" plain
									@click="goRefund(item)">
									{{getBtn(item.status)}}
								</button>
								<!-- <view class="paybtnBox">
									<button class="paybtn greenborder" v-if="item.status==0">立即支付</button>
									
									<button class="paybtn redborder" v-if="item.status==0"
										@click="cancelOrder(item.orderNum)">取消订单</button>
									<button @tap="tzorderDetails(item)" class="paybtn balckborder" v-else>订单详情</button>
								</view> -->
							</view>
						</view>

						<!-- 平台信息 -->
						<view class="orderListbox platform" v-if="orderDetail.type == 2">
							<view class="between">
								<text style="font-size: 30rpx;">平台信息</text>
							</view>
							<view class="detailsBox" style="height: 60rpx;padding: 30rpx 0;margin-top: 0;">
								<view class="detailsBoxLeft" style="line-height: 60rpx;">
									<view>电话:{{orderDetail.phone}}</view>
								</view>
								<view class="detailsBoxRight">
									<button type="primary" @tap="callphone" plain size="mini" style="margin-right: 0;">致电</button>
								</view>
							</view>
						</view>
						<!-- 商家信息 -->
						<view class="orderListbox" v-else style="padding-bottom: 20rpx;">
							<view class="between">
								<text style="font-size: 30rpx;">商家信息</text>
							</view>
							<view class="detailsBox" style="min-height: 135rpx;margin-top: 20rpx;">
								<view class="detailsBoxLeft ">

									<view style="position: absolute;" v-if="orderDetail.storeAvatar">
										<image class="orderListboximg" :src="imgapi+orderDetail.storeAvatar" mode="">
										</image>
									</view>
									<!-- v-if="plotDetail.businessType==0||plotDetail.businessType==2" -->

									<!-- <view v-if="plotDetail.businessType==1||plotDetail.businessType==2">种植开放时间
										{{plotDetail.growOpenTime}}-{{plotDetail.growOverTime}}
									</view> -->
									<view style="margin-left: 145rpx;font-size: 32rpx;">
										<view  v-if="orderDetail.storeName">
											{{orderDetail.storeName}}
										</view>
										<view style="margin-top: 10rpx;">{{orderDetail.storePhone}}</view>
									</view>

								</view>
								<view >
									<!-- <button type="primary" @tap="handleMapLocation" plain size="mini">导航</button> -->
									<button type="primary" @tap="callphone" plain size="mini" >致电</button>
								</view>
							</view>
						</view>

						<view class="orderListbox ">
							<view class="between">
								<text style="font-size: 30rpx;">订单信息</text>
							</view>
							<view class="detailsBox">
								<view class="detailsBoxLeft">
									<text style="white-space: nowrap;">订单编号:{{item.orderNum}}</text>
									<!-- <rich-text :nodes="getStatus(item.status)"></rich-text> -->
									<view style="margin: 10rpx 0;">创建时间:{{time}}</view>
									<!-- <view>预留号码:{{15521454246}}</view> -->
								</view>
							</view>
						</view>
						<!-- 支付方式 -->
						<view v-if="item.status==0" class="orderListbox3">
							<view class="between">
								<text style="font-size: 30rpx;">支付方式</text>
							</view>
							<radio-group name="pay" @change="payWay">
								<view class="plotAddressBorder between3">
									<view class="center_vertical">
										<view>
											<image src="../../static/images/growVegetables/pay_icon.png" class="icon">
											</image>
										</view>
										<view>
											微信支付
										</view>
									</view>
									<view>
										<radio value="wechat" />
									</view>
								</view>
								<view class="plotAddressBorder between3">
									<view class="center_vertical">
										<view>
											<image src="../../static/images/growVegetables/wallet_icon.png"
												class="icon">
											</image>
										</view>
										<view>
											余额支付
										</view>
									</view>
									<view>
										<radio value="balance" />
									</view>
								</view>
							</radio-group>
						</view>
						<button class="paybtn2" type="primary" v-if="item.status==0"
							@click="pay(item.orderNum)">立即支付</button>
						<button class="paybtn2" v-if="item.status==3" type="primary" @click="goEval">立即评价</button>

					</view>
				</view>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import {
		getTime
	} from '@/utils/auth.js'
  import SOtime from "../../js_sdk/fl-SOtime/SOtime";
	export default {
		components: {
			Skeleton
		},
		data() {
			return {
				item: {},
				imgapi: "",
				payMode: "",
				orderDetail: {}, //订单信息
				flg: 1, //商家 和 平台切换
				ifBottomRefresh: false, //下拉刷新
				time: '',

				loading: true,
				skeleton: [
					'square+line*2',
					'line',
					40,
					'line',
					'square-lg+line-lg*2+square*2',
					40,
					'line*3'

				], //骨架屏

			}
		},

		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			this.item = JSON.parse(e.item)


			this.getList(this.item.orderNum)
		},

		methods: {
			getBtn(status){
				switch (status) {
					case 1:
						
					case 2:
						return '退款'
					case 3:
						return '退还'
					case 4:
						return '申请售后'
				}
			},
			
			// 去退款
			goRefund(item) {
				if(this.item.type == 1){
					uni.showToast({
						title:"平台商品暂无退款",
						icon:"none"
					})
					return
				}
				/* 0:未申请售后
				1:申请退款中
				2:退款完成 */
				if(this.orderDetail.order.afterSaleStatus == 0){
					const items = JSON.stringify(item);
					uni.navigateTo({
						url: `../afterSales/selectAfterSale?item=${items}`
					})
				}else{
					uni.navigateTo({
						url:`../afterSales/returnOrderDetail?orderNum=${item.orderNum}`
					})
				}
				
				
			},

			// 评价页
			goEval() {
				console.log(111);
				let type = this.orderDetail.type == 2 ? 5 : 2
				uni.navigateTo({
					url: `./eval?order=${JSON.stringify(this.orderDetail.order)}&type=${type}`
				});

			},
			// 订单状态
			getStatus(status) {
				console.log(status);
				switch (status) {
					case 0:
						return '<font style="color: #90d028;">待付款</font>'
					case 1:
						return '<font style=" color: #90d028;">待收货</font>'
					case 2:
						return '<font style="color: #90d028;">待评价</font>'
					case 3:
						return '<font style="color: #90d028;">已完成</font>'
					case -1:
						return '<font style="color: #90d028;">已取消</font>'
				}
			},
			//单选事件
			payWay(e) {
				this.payMode = e.detail.value
			},

			//支付订单
			pay(orderNum) {

				if (!this.payMode) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				//成功提交执行对应操作
				if (this.payMode == "balance") {
					uni.showLoading({
						title: "余额支付中......"
					})
					let orderNumList = []
					orderNumList.push(orderNum)
					this.balancePay(JSON.stringify(orderNumList))

					//半秒缓冲，等到后端状态修改完成跳转
					setTimeout(function() {
						uni.hideLoading()
						//跳转到订单列表
						uni.redirectTo({
							url: './shopOrder'
						})
					}, 600);
				} else {
					console.log("微信支付")
				}
				/* if (this.payMode == "balance") {
					var orderNumList = []
					orderNumList.push(orderNum)
					this.balancePay(JSON.stringify(orderNumList))
				} */
			},
			balancePay(orderNumList) {
				this.$axios({
					url: `user/shopMall/balancePay`,
					method: "post",
					data: {
						orderNumList: orderNumList
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			wechat(orderNumList) {

			},
			// 获取列表信息
			getList(orderNum) {
				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "/user/info/shopOrderDetail",
					method: "post",
					data: {
						orderNum
					}
				}).then((res) => {
					this.orderDetail = res.result

					this.time = SOtime.time3(res.result.order.createTime)

					// 骨架屏取消
					this.loading = false;
				})
			},
			// 打电话
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.orderDetail.phone || this.orderDetail.storePhone //仅为示例
				});
			},
			// 导航
			handleMapLocation() {
				console.log('进入导航')
				//  经纬度暂时写死，后面介入数据
				let latitude = Number(22.51595);
				let longitude = Number(113.3926);
				let address = '中山市'
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 10,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.topGoods{
		.title{
			font-size: 30rpx;
		}
		.spec{
			font-size: 28rpx;
			color: #a1a1a1;
			margin-top: 15rpx;
		}
	}
	
	.refund {
		border-radius: 100rpx;
		border: 2rpx solid #999;
		margin-right: 0;
	}

	.num {
		color: #cccccc;
		font-size: 32rpx;
		display: flex;
		flex-direction: column;
		width: 25%;
		justify-content: space-between;
		align-items: flex-end;
		height: 130rpx;
	}

	.imgBuju {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.contener700 .platform {
		display: flex;
		flex-direction: column;
		height: 160rpx;
	}

	.detailsBox {
		display: flex;
		margin-top: 20rpx;
		width: 100%;
		justify-content: space-between;
	}

	.paybtn2 {
		background-color: #18BC37;
		margin: 20rpx 0;
	}

	.orderListbox {
		margin-top: 20rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		min-height: 160rpx;
		padding: 20rpx;
	}

	.orderListbox3 {
		margin: 20rpx 0 30rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		height: 280rpx;
		padding: 20rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.plotAddressBorder {
		width: 100%;
		/* background-color: #000000; */
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-bottom: 0.5rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	.orderListbox2 {
		height: 240rpx !important;
	}

	/deep/ .between3.data-v-16353827 {
		width: 100%;
	}

	.detailsBoxLeft {
		width: 65%;
		font-size: 32rpx;
		color: #808080;
		/* background-color: #00A0DC; */
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.between {
		padding-bottom: 15rpx;
		border-bottom: 0.5rpx solid #C4C4C4;
	}

	.between2 {
		display: flex;
		justify-content: space-between;
		width: 520rpx;
	}

	.orderListboximg {
		border-radius: 20rpx;
		width: 130rpx;
		height: 130rpx;
		border: 2rpx solid #eee;
	}

	.orderListxinxi {
		margin-top: 10rpx;
		height: 130rpx;
		display: flex;
	}

	.orderListprice {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orderListprice text {
		color: #ff7800;
		font-weight: bold;
		margin-left: 5rpx;
	}

	.paybtn {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		transform: scale(0.9);
		background-color: #fff;
	}

	.balckborder {
		border: 1rpx solid #747474;
		color: #747474;
	}

	.redborder {
		border: 1rpx solid #e20f0f;
		color: #e20f0f;
	}

	.greenborder {
		border: 1rpx solid #3282c8;
		color: #3282c8;
	}

	.paybtnBox {
		display: flex;
	}

	.snapshot {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 25rpx;
	}
</style>
